<template>
  <div class="index dis-f jc-sb">
    <div class="w-500">
      <con-box class="h-320" title="可用库存">
        <base-echarts :options="inventoryOptions" />
      </con-box>
      <con-box class="h-290 mt-10" title="订单及新品铺">
        <div class="dis-f jc-sb pl-20 pr-20">
          <div class="pt-10 fz-16 c-fff9f8">
            订单满足率 <span class="ml-60 fz-18 c-fff fw-700">{{ serviceNewproductList.meetRadio }}%</span>
          </div>
          <div class="flex-1 h-1 bgc-fff po-r t-20 l-10 line-linear"></div>
        </div>
        <div class="content dis-f jc-sb mt-20 pr-20 pl-20">
          <!-- <div class="bg-item dis-f ai-c w-48p h-36">
            <div class="pl-28 pr-10 c-fff9f8 fz-14 dis-f jc-sb">
              当日过账量<span class="fz-18 dis-ib mt--2 mr-4 va-m c-fff ml-30 fw-700">{{
                serviceNewproductList.posting
              }}</span
              >万
            </div>
          </div> -->
          <div class="bg-item dis-f ai-c w-48p h-36 dh">
            <div class="pl-28 pr-10 c-fff9f8 fz-14 dis-f ai-c jc-sb">
              接单数量<span class="dis-ib mt--2 mr-4 va-m fz-18 c-fff ml-30 fw-700">{{
                serviceNewproductList.receivingOrder
              }}</span>单
            </div>
          </div>
        </div>
        <div class="dis-f jc-sb pl-20 pr-20 mt-20">
          <div class="pt-10 fz-16 c-fff9f8">
            新品铺货达成率
            <!-- <span class="ml-60 fz-18 c-fff fw-700">{{ serviceNewproductList.reachRadio }}%</span> -->
          </div>
          <div class="flex-1 h-1 bgc-fff po-r t-20 l-10 line-linear-spec"></div>
        </div>
        <div class="content dis-f jc-sb mt-20 pr-20 pl-20">
          <div class="bg-item spec-bg-item dis-f ai-c w-48p h-36 dh">
            <div class="pl-28 pr-10 c-fff9f8 fz-14 dis-f ai-c jc-sb">
              3天出货达成<span class="dis-ib mt--2 mr-4 fz-18 va-m c-fff ml-30 fw-700">{{
                serviceNewproductList.threedays
              }}</span>%
            </div>
          </div>
          <div class="bg-item spec-bg-item dis-f ai-c w-48p h-36 dh">
            <div class="pl-28 pr-10 c-fff9f8 fz-14 dis-f ai-c jc-sb">
              7天出货达成<span class="dis-ib mt--2 mr-4 va-m fz-18 c-fff ml-30 fw-700">{{
                serviceNewproductList.sevendays
              }}</span>%
            </div>
          </div>
        </div>
      </con-box>
      <con-box class="h-260 mt-10" title="成品出货配送在途追踪">
        <div class="pt-20 table p-20">
          <div class="th fz-14 c-BDE1FF dis-f jc-sb h-48 ai-c ta-c mb-4">
            <div class="td w-80">车牌</div>
            <div class="td flex-1">单位</div>
            <div class="td w-110">司机</div>
            <div class="td w-80 c-F67B0F">在途时长</div>
          </div>
          <base-seamless-scroll>
            <div class="list-con">
              <div v-for="(item, index) in serviceIntransitList" :key="index" class="tr dis-f jc-sb h-48 ai-c mb-4">
                <div class="w-110 td fz-14 c-fff ta-c">{{ item.licensePlate }}</div>
                <div class="flex-1 td fz-14 c-fff ta-c">{{ item.unit }}</div>
                <div class="ta-c td fz-14 w-110 ta-c">{{ item.driver }}</div>
                <div class="ta-c td fz-14 c-0091FF w-80 ta-c">{{ item.duration }}</div>
              </div>
            </div>
          </base-seamless-scroll>
        </div>
      </con-box>
    </div>
    <div class="flex-1 pl-10 pr-10 dis-f ai-flex-end">
      <con-box class="w-100p h-468" title="物运情况">
        <div class="content dis-f jc-sb pr-20 pl-20">
          <div class="pt-10 fz-16 c-fff9f8 w-110">
            KPI指标
          </div>
          <div class="bg-item dis-f ai-c w-40p h-36 dh">
            <div class="pl-28 pr-10 c-fff9f8 fz-14 dis-f ai-c jc-sb">
              月累到厂及时率<span class="dis-ib mt--2 mr-4 va-m fz-18 c-fff ml-30 fw-700">99.89</span>%
            </div>
          </div>
          <div class="bg-item dis-f ai-c w-40p h-36 dh">
            <div class="pl-28 pr-10 c-fff9f8 fz-14 dis-f ai-c jc-sb">
              月累在途时长符合率<span class="dis-ib mt--2 mr-4 va-m fz-18 c-fff ml-30 fw-700">99.29</span>%
            </div>
          </div>
        </div>
        <div class="content dis-f jc-sb mt-10 pr-20 pl-20">
          <div class="pt-10 fz-16 c-fff9f8 w-110">
            当日物流效率
          </div>
          <div class="bg-item spec-bg-item dis-f ai-c w-40p h-36 dh">
            <div class="pl-28 pr-10 c-fff9f8 fz-14 dis-f ai-c jc-sb">
              平均排队时长<span class="dis-ib mt--2 mr-4 fz-18 va-m c-fff ml-30 fw-700">2.3</span>H
            </div>
          </div>
          <div class="bg-item spec-bg-item dis-f ai-c w-40p h-36 dh">
            <div class="pl-28 pr-10 c-fff9f8 fz-14 dis-f ai-c jc-sb">
              平均装车时长<span class="dis-ib mt--2 mr-4 va-m fz-18 c-fff ml-30 fw-700">3.2</span>H
            </div>
          </div>
        </div>
        <div class="content dis-f jc-sb mt-10 pr-20 pl-20">
          <div class="pt-10 fz-16 c-fff9f8 w-110">
            在途\签收管理
          </div>
          <div class="bg-item spec-bg-item dis-f ai-c w-40p h-36 dh">
            <div class="pl-28 pr-10 c-fff9f8 fz-14 dis-f ai-c jc-sb">
              月累在途轨迹完整率<span class="dis-ib mt--2 mr-4 fz-18 va-m c-fff ml-30 fw-700">82.00</span>%
            </div>
          </div>
          <div class="bg-item spec-bg-item dis-f ai-c w-40p h-36 dh">
            <div class="pl-28 pr-10 c-fff9f8 fz-14 dis-f ai-c jc-sb">
              月累签单准确率<span class="dis-ib mt--2 mr-4 va-m fz-18 c-fff ml-30 fw-700">99.00</span>%
            </div>
          </div>
        </div>
        <div class="dis-f jc-sb pl-20 pr-20 mt-10">
          <div class="pt-10 fz-16 c-fff9f8">
            出货\未出概况
          </div>
          <div class="flex-1 h-1 bgc-fff po-r t-20 l-10 line-linear-spec"></div>
        </div>
        <div class="content dis-f jc-sb mt-10 pr-20 pl-20">
          <div class="bg-item spec-bg-item dis-f ai-c w-31p h-36 dh">
            <div class="pl-28 pr-10 c-fff9f8 fz-14 dis-f ai-c jc-sb">
              昨日出货<span class="dis-ib mt--2 mr-4 fz-18 va-m c-fff ml-30 fw-700">281</span>
            </div>
          </div>
          <div class="bg-item spec-bg-item dis-f ai-c w-31p h-36 dh">
            <div class="pl-28 pr-10 c-fff9f8 fz-14 dis-f ai-c jc-sb">
              今日未出<span class="dis-ib mt--2 mr-4 va-m fz-18 c-fff ml-30 fw-700">133</span>
            </div>
          </div>
          <div class="bg-item spec-bg-item dis-f ai-c w-31p h-36 dh">
            <div class="pl-28 pr-10 c-fff9f8 fz-14 dis-f ai-c jc-sb">
              未出天数<span class="dis-ib mt--2 mr-4 va-m fz-18 c-fff ml-30 fw-700">0.47</span>
            </div>
          </div>
        </div>
        <div class="dis-f jc-sb pl-20 pr-20 mt-10">
          <div class="pt-10 fz-16 c-fff9f8">
            当日运力\出货追踪
          </div>
          <div class="flex-1 h-1 bgc-fff po-r t-20 l-10 line-linear-spec"></div>
        </div>
        <div class="content dis-f jc-sb mt-10 pr-20 pl-20 flex-wrap-wrap pb-10">
          <div class="bg-item spec-bg-item dis-f ai-c w-31p h-36 dh">
            <div class="pl-28 pr-10 c-fff9f8 fz-14 dis-f ai-c jc-sb">
              待派车<span class="dis-ib mt--2 mr-4 fz-18 va-m c-fff ml-30 fw-700">39</span>
            </div>
          </div>
          <div class="bg-item spec-bg-item dis-f ai-c w-31p h-36 dh">
            <div class="pl-28 pr-10 c-fff9f8 fz-14 dis-f ai-c jc-sb">
              未到厂<span class="dis-ib mt--2 mr-4 va-m fz-18 c-fff ml-30 fw-700">12</span>
            </div>
          </div>
          <div class="bg-item spec-bg-item dis-f ai-c w-31p h-36 dh">
            <div class="pl-28 pr-10 c-fff9f8 fz-14 dis-f ai-c jc-sb">
              排队中<span class="dis-ib mt--2 mr-4 va-m fz-18 c-fff ml-30 fw-700">4</span>
            </div>
          </div>
          <div class="bg-item spec-bg-item dis-f ai-c w-31p h-36 dh mt-10">
            <div class="pl-28 pr-10 c-fff9f8 fz-14 dis-f ai-c jc-sb">
              已装车<span class="dis-ib mt--2 mr-4 va-m fz-18 c-fff ml-30 fw-700">9</span>
            </div>
          </div>
          <div class="bg-item spec-bg-item dis-f ai-c w-31p h-36 dh mt-10">
            <div class="pl-28 pr-10 c-fff9f8 fz-14 dis-f ai-c jc-sb">
              在途<span class="dis-ib mt--2 mr-4 va-m fz-18 c-fff ml-30 fw-700">39</span>
            </div>
          </div>
          <div class="w-31p h-36"></div>
        </div>
      </con-box>
    </div>
    <div class="w-500">
      <con-box class="h-626" title="排单及出货进度">
        <div class="top">
          <schedule-shipments-chart title="当日排单进度" :scheduleColor="['#05E3FB', 'rgba(0, 233, 255,.45)']"
            :budgetColor="['#19E2A7', 'rgba(25, 226, 167,.45)']" :xAxisData="scheduleXAxisData"
            :seriesData="schedulingList" :seriesData1="schedulingBudgetList" />
        </div>
        <div class="bottom">
          <schedule-shipments-chart title="当日出货进度" :scheduleColor="['#FFDE36', 'rgba(255, 222, 54,.45)']"
            :budgetColor="['#E65458', 'rgba(230, 84, 88,.45)']" :xAxisData="scheduleXAxisData" :seriesData="shipmentList"
            :seriesData1="shipmentBudgetList" seriesName1="当日出货进度（%）" seriesName2="当日出货量（箱）" />
        </div>
      </con-box>
      <con-box class="h-250 mt-12" title="应出未出">
        <stripe-bar-chart :xAxisData="outXAxisData" :barData="outBarData" />
      </con-box>
    </div>
  </div>
</template>

<script>
// iui
function strCut(str, num) {
  let strArr = [];
  for (let i = 0; i < str.length; i += num) strArr.push(str.slice(i, i + num));
  return strArr;
}

import ConBox from "@/components/ConBox.vue";
import BaseEcharts from "@/components/BaseEcharts.vue";
import StripeBarChart from "@/components/StripeBarChart.vue";
import { nowSize } from "@/utils/nowSize";
import ScheduleShipmentsChart from "./components/ScheduleShipmentsChart.vue";
import BaseSeamlessScroll from "@/components/BaseSeamlessScroll.vue";
import mixins from "@/mixins/refresh";
import {
  serviceInventory,
  serviceNewproduct,
  serviceIntransit,
  serviceTimeliness,
  serviceSchedule,
  serviceOut,
} from "@/api/apis.js";
import { getSevenDays } from "@/utils/tools"
export default {
  name: "index",
  components: {
    ConBox,
    BaseEcharts,
    StripeBarChart,
    ScheduleShipmentsChart,
    BaseSeamlessScroll,
  },
  mixins: [mixins],
  data() {
    return {
      query: {
        factoryName: this.$route.query.factoryName,
      },
      // fui
      inventoryOptions: {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.9)",
          textStyle: {
            fontSize: nowSize(14),
            color: "#fff",
          },
        },
        grid: {
          bottom: "20%",
          top: "16%",
          right: "6%",
          left: "14%",
        },
        // dataZoom: [
        //   {
        //     type: "slider", //slider表示有滑动块的，inside表示内置的
        //     show: true,
        //     xAxisIndex: [0],
        //     start: 0,
        //     end: 15,
        //   },
        // ],
        xAxis: {
          data: [],
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#22314D",
            },
          },
          axisLabel: {
            show: true,
            // interval: 0,
            // rotate: 35,
            // formatter: function (value) {
            //   let strArr = strCut(value, 4)
            //   return strArr.join('\n')
            // },
            textStyle: {
              color: "#fefefe",
              fontSize: nowSize(12),
            },
            margin: 15, //刻度标签与轴线之间的距离。
          },
        },
        yAxis: {
          name: "数量",
          nameTextStyle: {
            color: "#FEFEFE",
            align: "right",
            fontSize: nowSize(12),
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#FEFEFE",
              fontSize: nowSize(12),
            },
          },
        },
        series: [
          // 头
          {
            name: "",
            type: "pictorialBar",
            tooltip: { show: false },
            symbolSize: [20, 10],
            symbolOffset: [0, -5],
            z: 12,
            itemStyle: {
              normal: {
                color: "rgba(36, 57, 84,0.8)",
              },
            },
            data: [],
          },
          //底部立体柱
          {
            stack: "1",
            type: "bar",
            tooltip: { show: true },
            barWidth: 20,
            data: [],
            itemStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      //第一节下面
                      offset: 0,
                      color: "#FFC820",
                    },
                    {
                      offset: 1,
                      color: "#FFC820",
                    },
                  ],
                },
              },
            },
          },
          //最底下的圆片
          {
            name: "",
            type: "pictorialBar",
            tooltip: { show: false },
            symbolSize: [20, 10],
            symbolOffset: [0, 5],
            z: 12,
            itemStyle: {
              normal: {
                color: "#c39953",
              },
            },
            data: [],
          },
          // 中间圆片
          {
            name: "",
            type: "pictorialBar",
            tooltip: { show: false },
            symbolSize: [20, 10],
            symbolOffset: [0, -5],
            itemStyle: {
              normal: {
                color: "#bf954f",
              },
            },
            z: 12,
            data: [],
          },
          //上部立体柱
          {
            stack: "1",
            tooltip: { show: false },
            type: "bar",
            itemStyle: {
              normal: {
                color: "rgba(30, 54, 64,0.5)",
              },
            },

            barWidth: 20,
            data: [],
          },
        ],
      },
      // 订单及新品铺
      serviceNewproductList: {},
      // 成品出货配送在途追踪列表
      serviceIntransitList: [],
      serviceTimelinessData: {},
      scheduleXAxisData: [],
      schedulingList: [],
      schedulingBudgetList: [],
      shipmentList: [],
      shipmentBudgetList: [],
      outXAxisData: [],
      outBarData: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    // hui

    init() {
      this.queryServiceInventory();
      this.queryServiceNewproduct();
      this.queryServiceIntransit();
      this.queryServiceSchedule();
      this.queryServiceOut();
      this.queryServiceTimeliness();
    },
    // 可用库存
    async queryServiceInventory() {
      // let { code, data } =
      //   (await serviceInventory({ factoryName: this.query.factoryName }).catch((err) => {
      //     err;
      //   })) || {};
      // if (code === 200) {}
      const data = [
        {
          "createBy": null,
          "createTime": "2023-10-19 15:01:09",
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "id": 35,
          "factoryName": "杭州顶益工厂",
          "workshopName": null,
          "lineName": null,
          "brandName": "鲜虾鱼板",
          "number": "46021.00"
        },
        {
          "createBy": null,
          "createTime": "2023-10-19 15:01:09",
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "id": 36,
          "factoryName": "杭州顶益工厂",
          "workshopName": null,
          "lineName": null,
          "brandName": "红烧牛肉袋面",
          "number": "185634"
        },
        {
          "createBy": null,
          "createTime": "2023-10-19 15:01:08",
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "id": 20,
          "factoryName": "杭州顶益工厂",
          "workshopName": null,
          "lineName": null,
          "brandName": "红烧牛肉桶面",
          "number": "165873"
        },
        {
          "createBy": null,
          "createTime": "2023-10-19 15:01:08",
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "id": 21,
          "factoryName": "杭州顶益工厂",
          "workshopName": null,
          "lineName": null,
          "brandName": "红烧牛肉BIG桶",
          "number": "102578"
        },
        {
          "createBy": null,
          "createTime": "2023-10-19 15:01:08",
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "id": 22,
          "factoryName": "杭州顶益工厂",
          "workshopName": null,
          "lineName": null,
          "brandName": "红牛拌面",
          "number": "102578"
        },
        {
          "createBy": null,
          "createTime": "2023-10-19 15:01:08",
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "id": 23,
          "factoryName": "杭州顶益工厂",
          "workshopName": null,
          "lineName": null,
          "brandName": "香辣牛肉袋面",
          "number": "119546"
        },
        {
          "createBy": null,
          "createTime": "2023-10-19 15:01:08",
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "id": 24,
          "factoryName": "杭州顶益工厂",
          "workshopName": null,
          "lineName": null,
          "brandName": "藤椒牛肉",
          "number": "30257.00"
        }
      ];
      this.inventoryOptions.xAxis.data = data.map((item) => item.brandName);
      const result = data.map((item) => +item.number);
      const maxNum = result.sort((a, b) => {
        return b - a;
      })[0];
      const dataList = data.map((item) => ({
        name: item.brandName,
        value: item.number,
        max: +maxNum,
      }));
      // 头部数据
      let topData = dataList.map((item) => {
        return { name: "", value: item.max, symbolPosition: "end" };
      });
      // 底部立体柱子
      let bottomBar = dataList.map((item) => {
        return {
          value: item.value,
        };
      });
      // 底下圆片
      let bottomCircle = dataList.map((item) => {
        return { name: "", value: item.max };
      });
      // 中间圆片
      let middleCircle = dataList.map((item) => {
        return { name: "", value: item.value, symbolPosition: "end" };
      });
      // 上边的柱子
      let upBar = dataList.map((item) => {
        return { name: item.name, value: item.max - item.value };
      });
      this.inventoryOptions.series[0].data = topData;
      this.inventoryOptions.series[1].data = bottomBar;
      this.inventoryOptions.series[2].data = bottomCircle;
      this.inventoryOptions.series[3].data = middleCircle;
      this.inventoryOptions.series[4].data = upBar;
    },
    // 订单及新品铺
    async queryServiceNewproduct() {
      // let { code, data } =
      //   (await serviceNewproduct({ factoryName: this.query.factoryName }).catch((err) => {
      //     err;
      //   })) || {};

      const code = 200, data = {
        "createBy": null,
        "createTime": null,
        "updateBy": null,
        "updateTime": "2023-10-13 00:07:05",
        "remark": null,
        "id": 1,
        "date": null,
        "factoryName": "杭州顶益工厂",
        "workshopName": null,
        "lineName": null,
        "posting": "143",
        "receivingOrder": "103",
        "meetRadio": "99.2",
        "threedays": "100",
        "sevendays": "100",
        "reachRadio": "98.3"
      };
      if (code === 200) {
        this.serviceNewproductList = data;
      }
    },
    // 成品出货配送在途追踪列表
    async queryServiceIntransit() {
      let { code, data } =
        (await serviceIntransit({ factoryName: this.query.factoryName, size: 30 }).catch((err) => {
          err;
        })) || {};
      // const code = 200, data = [
      //   {
      //     "createBy": null,
      //     "createTime": null,
      //     "updateBy": null,
      //     "updateTime": "2023-10-13 08:24:42",
      //     "remark": null,
      //     "id": 1,
      //     "factoryName": "杭州顶益工厂",
      //     "workshopName": null,
      //     "lineName": null,
      //     "licensePlate": "浙A354T5",
      //     "unit": "浙江金华",
      //     "driver": "刘飞腾",
      //     "duration": "99.29%"
      //   },
      //   {
      //     "createBy": null,
      //     "createTime": null,
      //     "updateBy": null,
      //     "updateTime": "2023-10-13 08:24:58",
      //     "remark": null,
      //     "id": 2,
      //     "factoryName": "杭州顶益工厂",
      //     "workshopName": null,
      //     "lineName": null,
      //     "licensePlate": "沪567T4",
      //     "unit": "上海闵行",
      //     "driver": "张国伟",
      //     "duration": "92.45%"
      //   },
      //   {
      //     "createBy": null,
      //     "createTime": null,
      //     "updateBy": null,
      //     "updateTime": "2023-10-13 00:13:50",
      //     "remark": null,
      //     "id": 3,
      //     "factoryName": "杭州顶益工厂",
      //     "workshopName": null,
      //     "lineName": null,
      //     "licensePlate": "皖A9D357",
      //     "unit": "安徽合肥",
      //     "driver": "刘玉",
      //     "duration": "96.47%"
      //   },
      //   {
      //     "createBy": null,
      //     "createTime": null,
      //     "updateBy": null,
      //     "updateTime": "2023-10-13 00:13:56",
      //     "remark": null,
      //     "id": 4,
      //     "factoryName": "杭州顶益工厂",
      //     "workshopName": null,
      //     "lineName": null,
      //     "licensePlate": "苏A67891",
      //     "unit": "江苏南京",
      //     "driver": "宁国强",
      //     "duration": "90.13%"
      //   },
      //   {
      //     "createBy": null,
      //     "createTime": null,
      //     "updateBy": null,
      //     "updateTime": "2023-10-13 00:11:44",
      //     "remark": null,
      //     "id": 5,
      //     "factoryName": "杭州顶益工厂",
      //     "workshopName": null,
      //     "lineName": null,
      //     "licensePlate": "苏F67893",
      //     "unit": "江苏南通",
      //     "driver": "刘东瑞",
      //     "duration": "95.12%"
      //   },
      //   {
      //     "createBy": null,
      //     "createTime": null,
      //     "updateBy": null,
      //     "updateTime": "2023-10-13 00:14:02",
      //     "remark": null,
      //     "id": 6,
      //     "factoryName": "杭州顶益工厂",
      //     "workshopName": null,
      //     "lineName": null,
      //     "licensePlate": "浙C67894",
      //     "unit": "浙江温州",
      //     "driver": "张新腾",
      //     "duration": "92.56%"
      //   },
      //   {
      //     "createBy": null,
      //     "createTime": null,
      //     "updateBy": null,
      //     "updateTime": "2023-10-13 08:24:05",
      //     "remark": null,
      //     "id": 7,
      //     "factoryName": "杭州顶益工厂",
      //     "workshopName": null,
      //     "lineName": null,
      //     "licensePlate": "浙B64895",
      //     "unit": "浙江宁波",
      //     "driver": "李智勇",
      //     "duration": "98.31%"
      //   },
      //   {
      //     "createBy": null,
      //     "createTime": null,
      //     "updateBy": null,
      //     "updateTime": "2023-10-13 08:25:08",
      //     "remark": null,
      //     "id": 8,
      //     "factoryName": "杭州顶益工厂",
      //     "workshopName": null,
      //     "lineName": null,
      //     "licensePlate": "浙DA67896",
      //     "unit": " 浙江绍兴",
      //     "driver": "陈强",
      //     "duration": "99.00%"
      //   },
      //   {
      //     "createBy": null,
      //     "createTime": null,
      //     "updateBy": null,
      //     "updateTime": "2023-10-13 08:24:27",
      //     "remark": null,
      //     "id": 9,
      //     "factoryName": "杭州顶益工厂",
      //     "workshopName": null,
      //     "lineName": null,
      //     "licensePlate": "浙E6756",
      //     "unit": "浙江余姚",
      //     "driver": "王东",
      //     "duration": "94.12%"
      //   },
      //   {
      //     "createBy": null,
      //     "createTime": null,
      //     "updateBy": null,
      //     "updateTime": "2023-10-13 08:24:27",
      //     "remark": null,
      //     "id": 9,
      //     "factoryName": "杭州顶益工厂",
      //     "workshopName": null,
      //     "lineName": null,
      //     "licensePlate": "浙A6R796",
      //     "unit": "浙江余姚",
      //     "driver": "彭泽学",
      //     "duration": "94.12%"
      //   },
      //   {
      //     "createBy": null,
      //     "createTime": null,
      //     "updateBy": null,
      //     "updateTime": "2023-10-13 08:24:27",
      //     "remark": null,
      //     "id": 9,
      //     "factoryName": "杭州顶益工厂",
      //     "workshopName": null,
      //     "lineName": null,
      //     "licensePlate": "浙A0S658",
      //     "unit": "浙江余姚",
      //     "driver": "张钊",
      //     "duration": "97.89%"
      //   },
      //   {
      //     "createBy": null,
      //     "createTime": null,
      //     "updateBy": null,
      //     "updateTime": "2023-10-13 08:24:27",
      //     "remark": null,
      //     "id": 9,
      //     "factoryName": "杭州顶益工厂",
      //     "workshopName": null,
      //     "lineName": null,
      //     "licensePlate": "浙A6R796",
      //     "unit": "浙江杭州",
      //     "driver": "彭泽学",
      //     "duration": "95.12%"
      //   }
      // ];
      if (code === 200) {
        this.serviceIntransitList = data;
      }
    },
    // 提货到货及时率
    async queryServiceTimeliness() {
      // let { code, data } =
      //   (await serviceTimeliness({ factoryName: this.query.factoryName }).catch((err) => {
      //     err;
      //   })) || {};
      const code = 200, data = {
        "createBy": null,
        "createTime": null,
        "updateBy": null,
        "updateTime": "2023-10-13 08:26:02",
        "remark": null,
        "id": 1,
        "date": null,
        "factoryName": "杭州顶益工厂",
        "workshopName": null,
        "lineName": "",
        "takegoods": "190000",
        "takegoodsBudget": "280000",
        "takegoodsRadio": "99.89",
        "delivery": "90000",
        "deliveryBudget": "81000",
        "deliveryRadio": "90"
      };

      if (code === 200) {
        if (!data) return;
        this.serviceTimelinessData = data;
      }
    },
    // 当日排单
    async queryServiceSchedule() {
      // let { code, data } =
      //   (await serviceSchedule({
      //     factoryName: this.query.factoryName,
      //     size: 7,
      //   }).catch((err) => {
      //     err;
      //   })) || {};
      const date = getSevenDays();
      const code = 200, data = [
        {
          "createBy": null,
          "createTime": "2023-10-18 19:27:09",
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "id": 1,
          "date": "2023-10-12",
          "factoryName": "杭州顶益工厂",
          "workshopName": null,
          "lineName": null,
          "shipment": "386514.97",
          "shipmentBudget": "25.73",
          "shipmentRadio": "25.73",
          "scheduling": "257675.13",
          "schedulingBudget": "28.75",
          "schedulingRadio": "28.75"
        },
        {
          "createBy": null,
          "createTime": "2023-10-18 19:27:09",
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "id": 2,
          "date": "2023-10-13",
          "factoryName": "杭州顶益工厂",
          "workshopName": null,
          "lineName": null,
          "shipment": "288183.79",
          "shipmentBudget": "29.27",
          "shipmentRadio": "29.27",
          "scheduling": "319617.98",
          "schedulingBudget": "32.68",
          "schedulingRadio": "32.68"
        },
        {
          "createBy": null,
          "createTime": "2023-10-18 19:27:09",
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "id": 3,
          "date": "2023-10-14",
          "factoryName": "杭州顶益工厂",
          "workshopName": null,
          "lineName": null,
          "shipment": "255909.97",
          "shipmentBudget": "32.42",
          "shipmentRadio": "32.42",
          "scheduling": "345725.98",
          "schedulingBudget": "36.93",
          "schedulingRadio": "36.93"
        },
        {
          "createBy": null,
          "createTime": "2023-10-18 19:27:10",
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "id": 4,
          "date": "2023-10-15",
          "factoryName": "杭州顶益工厂",
          "workshopName": null,
          "lineName": null,
          "shipment": "170050.97",
          "shipmentBudget": "34.51",
          "shipmentRadio": "34.51",
          "scheduling": "1511.00",
          "schedulingBudget": "36.95",
          "schedulingRadio": "36.95"
        },
        {
          "createBy": null,
          "createTime": "2023-10-18 19:27:10",
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "id": 5,
          "date": "2023-10-16",
          "factoryName": "杭州顶益工厂",
          "workshopName": null,
          "lineName": null,
          "shipment": "249031.98",
          "shipmentBudget": "37.58",
          "shipmentRadio": "37.58",
          "scheduling": "432078.96",
          "schedulingBudget": "42.27",
          "schedulingRadio": "42.27"
        },
        {
          "createBy": null,
          "createTime": "2023-10-18 19:27:10",
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "id": 6,
          "date": "2023-10-17",
          "factoryName": "杭州顶益工厂",
          "workshopName": null,
          "lineName": null,
          "shipment": "369820.97",
          "shipmentBudget": "42.13",
          "shipmentRadio": "42.13",
          "scheduling": "426820.99",
          "schedulingBudget": "47.52",
          "schedulingRadio": "47.52"
        },
        {
          "createBy": null,
          "createTime": "2023-10-18 19:27:10",
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "id": 7,
          "date": "2023-10-18",
          "factoryName": "杭州顶益工厂",
          "workshopName": null,
          "lineName": null,
          "shipment": "198481.97",
          "shipmentBudget": "44.57",
          "shipmentRadio": "44.57",
          "scheduling": "0.00",
          "schedulingBudget": "47.52",
          "schedulingRadio": "47.52"
        }
      ];

      if (code === 200) {
        this.scheduleXAxisData = date;
        this.schedulingList = data.map((item) => item.scheduling);
        this.schedulingBudgetList = data.map((item) => item.schedulingBudget);
        this.shipmentList = data.map((item) => item.shipment);
        this.shipmentBudgetList = data.map((item) => item.shipmentBudget);
      }
    },
    // 应出未出
    async queryServiceOut() {
      // let { code, data } =
      //   (await serviceOut({ factoryName: this.query.factoryName, size: 7 }).catch((err) => {
      //     err;
      //   })) || {};
      const date = new Date();
      const month = (index) => {
        const num = date.getMonth() + 1 - (6 - index);
        const month = num > 0 ? num : 12 + num;
        return `${month}月`
      }
      const code = 200, data = [
        {
          "createBy": null,
          "createTime": "2023-10-18 19:27:10",
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "id": 1,
          "factoryName": "杭州顶益工厂",
          "workshopName": null,
          "lineName": null,
          "month": "5月",
          "number": "1.2"
        },
        {
          "createBy": null,
          "createTime": "2023-10-18 19:27:10",
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "id": 2,
          "factoryName": "杭州顶益工厂",
          "workshopName": null,
          "lineName": null,
          "month": "6月",
          "number": "1.5"
        },
        {
          "createBy": null,
          "createTime": "2023-10-18 19:27:10",
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "id": 3,
          "factoryName": "杭州顶益工厂",
          "workshopName": null,
          "lineName": null,
          "month": "7月",
          "number": "0.5"
        },
        {
          "createBy": null,
          "createTime": "2023-10-18 19:27:10",
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "id": 4,
          "factoryName": "杭州顶益工厂",
          "workshopName": null,
          "lineName": null,
          "month": "8月",
          "number": "0.7"
        },
        {
          "createBy": null,
          "createTime": "2023-10-18 19:27:11",
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "id": 5,
          "factoryName": "杭州顶益工厂",
          "workshopName": null,
          "lineName": null,
          "month": "9月",
          "number": "1.8"
        },
        {
          "createBy": null,
          "createTime": "2023-10-18 19:27:11",
          "updateBy": null,
          "updateTime": null,
          "remark": null,
          "id": 5,
          "factoryName": "杭州顶益工厂",
          "workshopName": null,
          "lineName": null,
          "month": "10月",
          "number": "1.2"
        },
      ];
      if (code === 200) {
        this.outXAxisData = data.map((item,index) => month(index));
        this.outBarData = data.map((item) => item.number);
      }
    },
  },
};
</script>

<style scoped lang="scss">
// jui

.top,
.bottom {
  height: 50%;
}

.bg-item {
  background: linear-gradient(to left, rgba(31, 144, 229, 0.3) 0%, rgba(31, 144, 229, 0.05) 100%);
  position: relative;

  &::before {
    position: absolute;
    content: "";
    width: 4px;
    height: 4px;
    left: 12px;
    top: 16px;
    background: #2acfff;
  }
}

.spec-bg-item {
  background: linear-gradient(to right, #0a1f25, #076874);

  &::before {
    background: #00e0fc;
  }
}

.line-linear {
  background: linear-gradient(to right, #1a2f38, #2acfff);
}

.line-linear-spec {
  background: linear-gradient(to right, #1a2f38, #02c9d7);
}

.table,
.dev {
  height: calc(100% - 60px);
}

.th {
  background-color: #142835;
}

.bg-th {
  background: url("~@/assets/images/fwgl_icon_y.png") no-repeat;
  background-size: 100% 100%;
}

.bg-th-green {
  background: url("~@/assets/images/fwgl_icon_g.png") no-repeat;
  background-size: 100% 100%;
}

.dh {
  position: relative;
  overflow: hidden;

  &::before {
    position: absolute;
    top: -10px;
    left: 0px;
    content: "";
    width: 2px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
    transform: rotate(45deg);
    animation: run 5s linear infinite;
  }
}

@keyframes run {
  0% {
    left: 0%;
  }

  100% {
    left: 100%;
  }
}
</style>
